<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>切版</title>
<link rel="stylesheet" href="css/qieban.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]--> 

</head>

<body>
<div class="header">
	<a href="http://www.qieban.cn/" target="_blank"><img src="img/logo.png" width="100"/></a>
    <span>v1.0</span>
</div>

<section>
	<h2>关于命名的极简主义</h2>
	<div class="text">
		<p>view--vw</p>
		<p>nav--nv</p>
		<p>left--lt</p>
		<p>right--rt</p>
		<p>head -- hd</p>
		<p>body --bd</p>
		<p>foot --ft</p>
		<p>list--lst</p>
		<p>wrap--wp</p>
		<p>&nbsp;</p>
		<p>&nbsp;</p>
  </div>
  <h2>标配</h2>
  <pre>.about_view_left{<br>width:auto;	<br>}<br>.about_list_right{<br>width:auto;<br>} </pre>
  <h2>瘦身</h2>
  <pre>
  .ab_vw_lt{<br>width:auto;	<br>}<br>.ab_lst_rt{<br>width:auto;<br>} </pre>
</section>

<section>
<h2>图片规范</h2>
<div class="demo">
  <p>图片命名以img_01.png 依次往后面顺，大banner图片，数据图片均保存为jpg图片，透明图片、小图标之类都存储为png24图片。</p>
  <p>结构用途的图片放入img目录，数据图片放入images目录下。</p>
</div>
</section>

<section>
<h2>如果涉及到多人协作</h2>
<div class="demo">
如果涉及到多人协作，通过 style_wz（人名首字母）.css命名；图片命名以人名（wz_1.png）命名。</div>
</section>

<section>
 <h2>文档</h2>
 <pre>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br>&lt;meta charset=&quot;utf-8&quot;&gt;<br>&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge,chrome=1&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;/&gt;<br>&lt;title&gt;切版&lt;/title&gt;
&lt;!--基础样式--&gt;<br>&lt;link rel=&quot;stylesheet&quot; href=&quot;css/qieban.css&quot;&gt;
&lt;!--css3动画库--&gt;<br>&lt;link rel=&quot;stylesheet&quot; href=&quot;css/animate.min.css&quot;&gt;
&lt;!--自己书写css的地方--&gt;<br>&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;
&lt;!--书写响应式代码的地方--&gt;<br>&lt;link rel=&quot;stylesheet&quot; href=&quot;css/responsive.css&quot;&gt;<br>&lt;link rel=&quot;shortcut icon&quot; href=&quot;img/favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt;
&lt;!--低版本浏览器添加html5支持--&gt;<br>&lt;!--[if lt IE 9]&gt;<br>&lt;script src=&quot;js/html5.js&quot;&gt;&lt;/script&gt;<br>&lt;![endif]--&gt; <br>&lt;/head&gt;<br>&lt;body&gt;
&lt;!--添加jquery库文件--&gt;<br>&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
&lt;!--好用小巧的响应式幻灯片--&gt;<br>&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.glide.js&quot;&gt;&lt;/script&gt;
&lt;!--添加css3前缀支持--&gt;<br>&lt;script type=&quot;text/javascript&quot; src=&quot;js/prefixfree.min.js&quot;&gt;&lt;/script&gt;
&lt;!--快速让网站绚丽起来--&gt;<br>&lt;script type=&quot;text/javascript&quot; src=&quot;js/wow.min.js&quot;&gt;&lt;/script&gt;
&lt;!--自己写JS的地方--&gt;<br>&lt;script type=&quot;text/javascript&quot; src=&quot;js/script.js&quot;&gt;&lt;/script&gt; <br>&lt;/body&gt;<br>&lt;/html&gt;</pre>
</section>
<section>
 <h2>响应式</h2>
 <pre>@media only screen and (max-width:800px) {<br>}</pre>
</section>
<section>
	<h2>旋转</h2>
	<div class="demo">
		
		<div class="huan">
			<img src="img/img.jpg"/>
		</div>
		
	</div>
	<div class="code">
	  <pre>/*360旋转*/<br>@keyframes spin {<br>0% {<br>   	transform:rotate(0deg);<br> }<br> 100% {<br>   	transform:rotate(-360deg);<br> }<br>}</pre>
  </div>
</section>

<section>
	<h2>关于</h2>
	<p>切版css1.0是切版网目前内部使用的框架，甚至于不算是一个框架，它只是提供了一个可靠的基础去创建你一个前端项目，提供了一段来自经验的css重写，并且约束了一些命名上的规范。</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
</section>


<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.glide.js"></script>
<script type="text/javascript" src="js/prefixfree.min.js"></script>
<script type="text/javascript" src="js/wow.min.js"></script>
<script type="text/javascript" src="js/script.js"></script> 
</body>
</html>

